<template>
	<div class="wrapper">
		<div class="wrapperCenter">
			<div class="content">
				<van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="getList">
					<!-- // <van-checkbox-group v-model="terList"> -->
					<empty v-if="!list.length"></empty>
					<div class="main_box" v-for="(item,index) in list" :key="index">
						<div class="main">
							<div class="stencil">
								模板名称：{{item.templateName}}
							</div>
							<div class="line">

							</div>
							<div class="dia">
								<div class="dis change_box" @click="additional(2,item)">
									<div class="dis">
										<img src="/src/assets/terminal/modification.png" alt="" />
									</div>
									<div class="change">
										修改
									</div>
								</div>
								<div class="dis change_box" @click="remove(item,index)">
									<div class="dis">
										<img src="/src/assets/terminal/deal.png" alt="" />
									</div>
									<div class="change">
										删除
									</div>
								</div>
								<div class="dis change_box" style="border: none;" @click="choice(item)">
									<div class="dis">
										<img src="/src/assets/terminal/choice.png" alt="" />
									</div>
									<div class="change">
										选择
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="dis">
						<div class="btn_box">
							<div class="btn dis" @click="additional(1)">
								新增
							</div>
						</div>
					</div>
					<!-- </van-checkbox-group> -->
				</van-list>
			</div>
		</div>

	</div>
</template>

<script>
	import {
		selectAgentTemplatePosChannelRateList,
		deleteAgentTemplatePosChannelRateById,
		selectAgentTemplatePosChannelRateById,
		updateAgentTemplatePosChannelRate
	} from '@/api/terminal'
	import store from '@/store'
	import {
		showConfirmDialog
	} from 'vant';
	import {
		showToast
	} from 'vant'
	import {
		useRoute,
		useRouter,
		RouterView
	} from 'vue-router'
	import {
		defineComponent,
		reactive,
		toRefs,
		ref,
		onMounted
	} from 'vue';
	export default defineComponent({
		name: 'sateActive',
		setup() {
			const router = useRouter()
			const routers = useRoute()
			const state = reactive({
				loading: false,
				finished: false,
				list: [],
				srarch: "",
				pageStart: 1,
				pageSize: 20,
			})
			//获取数据
			const getList = () => {
				let parames = {
					// srarch: state.srarch,
					// channelCode: router.query.channelCode,
					// terminalSn:state.terminalSn,
					pageStart: state.pageStart,
					pageSize: state.pageSize
				}
				selectAgentTemplatePosChannelRateList(parames).then(res => {
					if (res.data.records.length != 0) {
						if (res.data.records.length < 20) {
							state.finished = true
							state.loading = false
						} else {
							state.pageStart++
							state.finished = false
							state.loading = false
						}
						
						state.list = state.list.concat(res.data.records)
					} else {
						state.finished = true
						state.loading = false
					}

				})
			}
			//选择模板
			const choice = (item) => {
				// console.log(item)
				if(routers.query.invitation==1){
					router.push({
						path:'/additional',
						query:{
							configId: item.configId,
							invitation:routers.query.invitation
						}
					})
				}else{
					uni.postMessage({
						data: {
							type: "share",
							configId: item.configId
						}
					})
				}
				
			}
			// 删除
			const remove = (e, index) => {
				showConfirmDialog({
						// title: '标题',
						message: '是否确认删除当前模板？',
					})
					.then(() => {
						let parames = {
							configId: e.configId
						}
						deleteAgentTemplatePosChannelRateById(parames).then(res => {
							showToast('删除成功')
							// state.list.splice(index, 1)
							state.list=[]
							console.log(state.list.splice(index, 1), index)
							getList()
						})
					})
					.catch(() => {
						// on cancel
					});

			}
			//新增
			const additional = (e, item) => {
				if (e == 1) {
					router.push({
						path: "/increased",
						query: {
							type: e,
						}

					})
				} else {
					router.push({
						path: "/increased",
						query: {
							type: e,
							configId: item.configId
						}

					})
				}

			}

			return {
				...toRefs(state),
				additional,
				getList,
				remove,
				choice
			}
		}
	})
</script>
<style scoped lang="scss">
	.wrapper {
		width: 100%;
		height: 100%;
		min-height: 100vh;
		background: #FFFFFF;

		.main_box {
			margin-top: 12px;
			padding: 0px 18px;
			box-sizing: border-box;
			background: #FFFFFF;

			.main {
				// width: 90%;
				box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.25);
				border-radius: 6px 6px 6px 6px;
				// padding: 16px 16px;
				padding-top: 16px;
				box-sizing: border-box;

				.stencil {
					// margin-top: 16px;
					margin-left: 16px;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 14px;
					color: #333333;
				}

				.line {
					width: 100%;
					border-bottom: 1px solid #F3F3F3;
					margin-top: 16px;
				}

				.change_box {
					width: 33%;
					border-right: 1px solid #F3F3F3;
					padding: 12px 0px;
					box-sizing: border-box;

					.change {
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 13px;
						color: #FF6C6C;
						margin-left: 4px;
					}
				}


				img {
					width: 13px;
					height: 13px;
				}
			}
		}

		.btn_box {
			// position: absolute;
			// bottom: 10%;
			// left: 50%;
			// transform: translateX(-50%);
			margin-top: 24px;

			.btn {
				width: 339px;
				height: 40px;
				background: #FF2828;
				border-radius: 6px 6px 6px 6px;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 15px;
				color: #FFFFFF;
			}
		}
	}
</style>